<template>
	<div style="height: 100%;">

		<div style="padding: 10px;border-radius: 8px;border: 1px solid#f5f5f5;" class="displayFlexBet bgfff">
			<div class="displayFlex">
				<span style="margin-right: 10px;color: #999;">开始时间</span>
				<el-date-picker v-model="params.startTime" placeholder="开始时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					type="date" size="small" class="w130px">
				</el-date-picker>
				<img src="@/assets/sIcon83.png" style="width: 20px;height: 5px;" class="ml10 mr10" />
				<span style="margin-right: 10px;color: #999;">结束时间</span>
				<el-date-picker v-model="params.endTime" placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					type="date" size="small" class="ml10 w130px">
				</el-date-picker>
				<el-button icon="el-icon-search" type="primary" @click="search()" size="small" class="ml10">查询</el-button>
			</div>
		</div>


		<div class="displayFlexBet bgfff pad15 mb10 color555 mt10" style="border-radius: 8px;">
			<div style="flex: 2;">批次</div>
			<div style="flex: 2;">状态</div>
			<div style="flex: 1; ">结果</div>
			<div style="flex: 2; ">计划时间</div>
			<div style="flex: 2; ">监测时间</div>
			<div style="flex: 2; ">经办人</div>
			<div style="flex: 3; ">报告</div>
			<div style="flex: 2;">操作</div>
		</div>

		<div style="border-radius: 8px;" class="color555 bgfff">
			<div class="displayFlexBet pad10 color555 point font13" v-for="(item,index) in tableData.list" :key="index"
				style="border-bottom:1px solid#F8F7F9">
				<div style="flex:2">{{item.batchNo}}</div>
				<div style="flex:2" class="displayFlex">
					<img v-if="item.statusStr == '已完成'" src="@/assets/sIcon86.png" style="width: 15px;height: 15px;"
						class="mr10" />
					<img v-else src="@/assets/sIcon87.png" style="width: 15px;height: 15px;" class="mr10" />
					{{item.statusStr}}
				</div>
				<div style="flex:1" class="">{{item.resultStr}}</div>
				<div style="flex:2" class="">{{item.planTime}}</div>
				<div style="flex:2" class="" v-if="item.monitorTime">{{item.monitorTime.split(" ")[0]}}</div>
				<div style="flex:2" class="" v-else></div>
				<div style="flex:2" class="">{{item.submitByName}}</div>
				<div style="flex:3" class="">{{item.fileName}}</div>

				<div style="flex: 2;display: flex;justify-content: flex-start;">
					<!-- <div v-if="item.status == 'COMPLETE'"
						style="background: #DCEBFC;padding: 4px 10px;color:#426AB3;border-radius: 20px;" class="font12 point"
						@click.stop="getFileList(item)">查看</div> -->
					<div style="background: #DCEBFC;padding: 4px 10px;color:#426AB3;border-radius: 20px;" class="font12 point"
						@click.stop="jiance(item)">监测</div>
				</div>

			</div>
			<el-empty v-if="tableData.list.length == 0" />
		</div>


		<el-dialog v-if="visible1" :visible.sync="visible1" width="530px" :title="'监测报告'" @close="closeDia" top="50px">
			<el-form ref="form" label-width="100px" :rules="formRules" :model="submitParams">
				<el-form-item label="监测时间" prop="monitorTime">
					<el-date-picker type="datetime" placeholder="监测时间" v-model="submitParams.monitorTime" style="width: 100%;"
						format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="报告时间" prop="reportTime">
					<el-date-picker type="date" placeholder="报告时间" v-model="submitParams.reportTime" style="width: 100%;">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="监测结果" prop="result">
					<el-select v-model="submitParams.result" style="width: 100%;" placeholder="监测结果">
						<el-option label="达标" value="NORMAL" />
						<el-option label="有超标" value="ABNORMAL" />
					</el-select>
				</el-form-item>

				<el-form-item label="监测因子" prop="pollutionList">
					<div class="displayFlexBet mb10" v-for="(item,index) in submitParams.pollutionList">
						<div>
							{{item.pollutionName}}
						</div>
						<div class="displayFlex ml10" style="width: calc(100% - 100px);">
							<el-input v-model="item.qty" placeholder="检测值" style="width: calc(100% - 50px);"></el-input>
							<span class="ml10">{{item.unitValue}}</span>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="监测报告">
					<div style="display: flex;">
						<el-upload ref="upload" accept=".doc,docx" :limit="1" :multiple="false" :file-list="submitParams.fileList"
							action="#" drag :auto-upload="false" :on-change="changeFile" :on-remove="removeFile"
							:on-exceed="uploadFileOver">
							<div class="displayFlex">
								<img src="@/assets/sIcon84.png" style="width: 15px;height: 15px;" class="mr10" />
								<span>上传文件</span>
							</div>
						</el-upload>

						<span v-if="submitParams.fileList && submitParams.fileList.length > 0" class="ml2 point"
							style="color: #3A3EF4;padding-bottom: 10px;" @click="uploadFile">确认上传</span>
					</div>
					<div class="displayFlex mt10">
						<div v-if="submitParams.fileName" class="color555 mr20">{{submitParams.fileName}}</div>
						<div class="point" style="color: #3A3EF4;" @click="getFileList">共用报告</div>
					</div>

				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: right!important;margin-top: 20px;">
				<el-button type="primary" size="small" @click="save()" :loading="isLoading">确 定</el-button>
				<el-button size="small" @click="cancle" style="background: #EBEBFE;color:#3A3EF4">取 消</el-button>
			</div>
		</el-dialog>


		<el-dialog :visible.sync="visible2" width="530px" :title="'监测报告列表'" top="50px">
			<el-table ref="singleTable" :data="fileList" highlight-current-row style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column property="fileName" label="文件名称">
				</el-table-column>
				<el-table-column property="reportTime" label="报告时间">
				</el-table-column>
				<el-table-column label="操作" width="80">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleSelect(scope.row)" type="primary">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

	</div>
</template>

<script>
	import $ from 'jquery'
	import uploadWord from '@/components/upload/uploadWord'
	import moment from 'moment'

	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let VIEW_ACTION = '/view';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';
	export default {
		components: {
			uploadWord
		},
		data() {
			return {
				isLoading: false,
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				selectItem: '',
				params: {
					ticketId: '',
					startTime: "",
					endTime: "",
					surveyId: '',
				},
				visible1: false,
				visible2: false,
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 99999,
					list: []
				},

				submitParams: {
					id: "", // 详情id
					monitorTime: '', // 监测时间 （精确到时分秒，虽然我也不知道精确到哪）
					reportTime: '', // 报告时间,
					monitorValue: '', // 监测值
					fileId: '', // 文件id
					fileList: [],
					file: {}
				},

				fileList: [],

				formRules: {
					monitorTime: [{
						required: true,
						message: '请选择监测时间',
						trigger: 'change',
					}],
					reportTime: [{
						required: true,
						message: '请选择报告时间',
						trigger: 'change',
					}],
					monitorValue: [{
						required: true,
						message: '请输入监测值',
						trigger: 'blur',
					}]
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.params.surveyId = that.getQueryString("id")

			that.getTableData()
		},
		methods: {

			handleSelect(item) {
				that.submitParams.fileId = item.fileId
				that.submitParams.fileName = item.fileName
				that.visible2 = false
			},

			getFileList() {
				that.ajax({
					url: "soil/survey/getSoilReportFileList",
					dataType: 'json',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						for (let item of result.data) {
							item.reportTime = item.reportTime.split(" ")[0]
						}
						that.fileList = result.data
						that.visible2 = true
					},
				})
			},

			cancle() {
				that.visible1 = false
				that.submitParams = that.$options.data().submitParams
			},

			jiance(item) {
				that.visible1 = true
				that.submitParams = JSON.parse(JSON.stringify(item))
				that.submitParams.id = item.id
				that.submitParams.result = "NORMAL"
			},

			uploadFile: function() {
				var formdata = new FormData()
				formdata.append("file", that.submitParams.file.raw);
				formdata.append("appKey", APPKEY);
				formdata.append("businessCode", that.randomChar(19));
				formdata.append("prodID", PRODID);
				$.ajax({
					url: IMGURL + '/upload',
					data: formdata,
					type: 'POST',
					dataType: 'json',
					contentType: false,
					processData: false,
					success: function(result) {
						var fileId = result.message.fileID;
						that.$refs.upload.clearFiles()
						that.submitParams.fileList = []
						that.submitParams.file = {}
						that.$message.success("上传成功！")
						that.$forceUpdate()
					},
					error: function() {}
				})
			},

			save() {
				console.log(that.submitParams.fileId)
				let thisPamas = JSON.parse(JSON.stringify(that.submitParams))
				thisPamas.monitorTime = thisPamas.monitorTime + ":00"

				that.$refs.form.validate((valid) => {
					if (valid) {
						that.isLoading = true
						that.ajax({
							url: "soil/survey/submit",
							dataType: 'json',
							contentType: 'application/json',
							data: JSON.stringify(thisPamas),
							success: function(result) {
								that.isLoading = false
								if (result.data) {
									that.cancle()
									that.getTableData()

									return that.$message({
										message: '保存成功',
										type: 'success'
									});
								} else {
									return that.$message({
										message: result.infoList[0],
										type: 'error'
									});
								}

							}
						})
					}
				})
			},

			uploadFileOver(files, fileList) {
				return this.$message({
					message: '请上传文件数量已超出，点击删除后重新上传文件',
					type: 'warning'
				});
			},

			changeFile: function(file, fileList) {
				file.url = URL.createObjectURL(file.raw);
				that.submitParams.fileList = fileList
				that.submitParams.file = file;
				that.$forceUpdate()
			},

			removeFile() {
				that.submitParams.fileList = []
				that.submitParams.file = ''
			},

			downLoadWord(item) {
				window.open(that.fileViewUrl + item.fileId)
			},

			uploadFileFunc(item) {
				that.visible1 = true
				that.selectItem = item
			},

			closeDia() {
				that.visible1 = false
				if (that.$refs.uploadWord) that.$refs.uploadWord.removeFile()
			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "sw/standBook/createProduceStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&facilitatorId=" + that.params.facilitatorId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName = "/soil/survey/getItemList"
				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that.tableData
						.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.planTime = item.planTime.split(" ")[0]
								item.completeTime = item.completeTime ? item.completeTime.split(" ")[0] : ''
							}
							that.tableData.list = result.data;
						}
					},
				})
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}

	>>>.el-upload-dragger {
		border: unset;
		height: unset;
		width: 120px;
	}

	>>>.el-dialog__body {
		padding: 10px 20px;
	}

	>>>.el-upload-list {
		margin-top: -18px;
		margin-left: -5px;
	}
</style>